<template>
  <div fluid grid-list-md class="agent-query-container">
    <v-layout row wrap align-content-start>
      <v-flex md12>
        <v-btn icon class="mx-1" @click="$router.push('/activity/eggsmash')">
          <v-icon>keyboard_backspace</v-icon>
         </v-btn>

         <span class="title ml-4">玩家「{{nickname}}」活动期间砸蛋记录详情</span>
      </v-flex>
      <v-flex md12 class="chip-selector">
        <v-chip
          @click="chipClicked(item)"
          v-for="item of chipItems"
          :key="item.name"
          outline
          :color="chipSelected === item.value ? 'teal':'grey'"
          text-color="black"
        >
          <v-avatar
            class="white--text subheading"
            :class="chipSelected === item.value ? 'teal':'grey'"
          >
            <v-icon v-if="chipSelected === item.value">check</v-icon>
          </v-avatar>
          <span class="subheading">{{item.name}}</span>
        </v-chip>
      </v-flex>
      <v-flex d-flex md12 class="overflow-table">
        <!-- 查询数据表格 -->
        <div class="table-container pos-abs">
          <v-data-table
            hide-actions
            :loading="showProgress"
            :headers="headers"
            :items="tableData"
            class="elevation-1"
          >
            <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
            <template slot="items" slot-scope="props">
              <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
              <td class="text-xs-center">
                <v-avatar size="36">
                  <img :src="props.item.headUrl" alt="头像">
                </v-avatar>
              </td>
              <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
              <td class="text-xs-center subheading">{{ props.item.way }}</td>
              <td class="text-xs-center subheading blue--text">+{{ props.item.number }}</td>
              <td class="text-xs-center subheading">{{ getTime(props.item.time) }}</td>
            </template>
            <!-- 没有数据时显示的提示 -->
            <template slot="no-data">
              <div class="text-md-center">
                <v-icon color="yellow darken-3">warning</v-icon>
                <span class="subheading">暂无数据</span>
              </div>
            </template>
          </v-data-table>
          <!-- 表格分页 -->
          <div class="text-xs-center my-2">
            <v-pagination
              @input="pageChange"
              circle
              :length="pagination.pageCount"
              :total-visible="pagination.totalVisible"
              v-model="pagination.page"
            ></v-pagination>
          </div>
        </div>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import { egg } from "../../api/activity";
import { getTime } from "../../util";
export default {
  data: () => ({
    showProgress: false,
    limit: 10,
    offset: 0,
    dialog: false,
    isSearch: false,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    tableData: [],
    headers: [
      { text: "玩家ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      {
        text: "获得途径",
        value: "proxyLevel",
        align: "center",
        sortable: false
      },
      { text: "砸蛋次数", value: "superId", align: "center", sortable: false },
      {
        text: "时间",
        value: "totalPrice",
        align: "center",
        sortable: false
      }
    ],
    chipItems: [
      {
        name: "全部",
        value: 1
      },
      {
        name: "邀请好友",
        value: 2
      },
      {
        name: "每日登录",
        value: 3
      },
      {
        name: "完成游戏",
        value: 4
      },
      {
        name: "购买钻石",
        value: 5
      },
      {
        name: "消耗钻石",
        value: 6
      }
    ],
    chipSelected: 1,
    nickname: '',
    uid:''
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
    let query = this.$route.query;
    this.nickname = query.name;
    this.uid = query.uid;
    // this.initialize();
    this.getEggSmashDetail();
  },
  methods: {
    getTime,
    refresh() {
      this.isSearch = false;
      this.offset = 0;
      this.chipSelected = 1;

      this.pagination.page = 1;
      this.getEggSmashDetail();
    },
    // 获取代理列表
    getEggSmashDetail() {
      const qs = {
        limit: this.limit,
        offset: this.offset,
        type: this.chipSelected,
        uid: this.uid,
      };
      this.showProgress = true;
      egg.getEggSmashDetail.r(qs).then(({ data }) => {
        if (data.result === 0) {
          if (data.data) {
            let rankData = data.data.dataList;
            this.tableData = rankData;
            this.pagination.pageCount = data.data.totalCount
              ? Math.ceil(data.data.totalCount / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    initialize() {
      this.tableData = [
        {
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 103214,
          nickname: "搭街坊",
          superId: 123000,
          createTime: "2018-4-19",
        }
      ];
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        this.getEggSmashDetail();
      } else {
        // ***
        this.search("wyvj");
      }
    },
    chipClicked(item) {
      this.chipSelected = item.value;
      this.pagination.page = 1;
        this.offset = 0;
        this.queryForm = {
        lftid: "",
        nickname: "",
        fromTime: "",
        toTime: ""
      };
      this.getEggSmashDetail();
    }
  }
};
</script>
<style lang="less" scoped>

</style>